import React,{ Component } from 'react';
import { List, NavBar, Icon, WhiteSpace,Radio, Button } from 'antd-mobile';
import { connect } from 'dva';
const RadioItem = Radio.RadioItem;
const Item = List.Item;
class PayPage extends Component {
    constructor (props) {
        super(props);
        this.state = {
        }
    }
    paybutton(){
        console.log('pay');
    }
    componentDidMount() {
    }
    render() {
    const payclick = (
        <Button 
            type="primary" 
            inline 
            size="small" 
            style={{ marginRight: '4px' }}
            onClick={()=>this.paybutton()}
        >
            支付
        </Button>
    );
    return (
        <div> 
            <NavBar
            mode="dark"
            leftContent="Back"
            rightContent={[
                <Icon key="0" type="search" style={{ marginRight: '16px' }} />,
                <Icon key="1" type="ellipsis" />,
            ]}
            >完成付款</NavBar>
            <List>
                <Item extra="¥10">
                    {"商品"}
                </Item>
            </List>
            <WhiteSpace size='md' />
            <List renderHeader={() => '选择支付方式'}>
                <RadioItem 
                    checked = { true }
                >
                支付宝
                </RadioItem>
                <Item extra = { payclick }>
                    合计：¥10
                </Item>
            </List>
        </div>
    )
    }
}
function mapStateToProps(state) {
    return {
    }
}
export default connect(mapStateToProps)(PayPage);